<template>
  <div class="comment-operate-area">
    <div class="btn reply-btn" v-if="isAddNew" @click="doReply">
      <i class="iconfont icon-write-fill"></i>
      添加新评论
    </div>
    <div :class="{ btn: true, 'like-btn': true, active: !!commentObj.isLiked }" v-if="!isAddNew" @click="doLike">
      <i class="iconfont icon-like1"></i>
      {{ likeCount > 0 ? likeCount : "赞" }}
    </div>
    <div class="btn reply-btn" v-if="!isAddNew" @click="doReply">
      <i class="iconfont icon-comment"></i>
      {{ replyCount > 0 ? replyCount : "回复" }}
    </div>
    <transition name="slide-fade">
      <div v-if="showReplyInput">
        <div class="comment-input">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="写下你的评论..."
            v-model="comment"
          >
          </el-input>
        </div>
        <div class="input-operate">
          <div class="btn" @click="cancelComment">取消</div>
          <div class="btn primary" @click="sendComment">发布</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
/**
    赞和回复的按钮
    作者的评论只能回复，不能点赞
*/
export default {
  name: 'c-oper-bar',
  data () {
    return {
      comment: '',
      showReplyInput: false
    }
  },
  props: {
    id: {
      type: Number,
      required: true
    },
    parentId: {
      type: Number,
      required: true
    },
    likeCount: {
      type: Number,
      default: 0
    },
    replyCount: {
      type: Number,
      default: 0
    },
    isAddNew: {
      type: Boolean,
      default: false
    },
    commentObj: {
      type: Object,
      default () {
        return {}
      }
    },
    detail: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    userId () {
      const userInfo = this.$store.state.userInfo
      if (userInfo) {
        return JSON.parse(userInfo).id
      } else {
        return ''
      }
    }
  },
  methods: {
    cancelComment () {
      this.showReplyInput = false
      this.comment = ''
    },
    async sendComment () {
      const doReply = await this.$store.dispatch('article/SEND_COMMENT', {
        authorId: this.detail.author_id,
        articleId: this.detail.id,
        content: this.comment.trim(),
        isParent: 2,
        toUserId: this.commentObj.user_id,
        parentId: this.parentId
      })
      if (doReply.status === 200) {
        this.$message.success('评论成功')
        this.comment = ''
        this.showReplyInput = false
        // 刷新评论列表
        this.$emit('doRefresh', 'comment')
      }
    },
    doReply () {
      this.showReplyInput = true
    },
    async doLike () {
      const like = await this.$store.dispatch('article/DO_LIKE', {
        id: this.id,
        user_id: this.userId,
        article_id: this.commentObj.article_id
      })
      if (like.status === 200) {
        this.$message.success(like.message)
        this.$emit('doRefresh', 'like')
      }
    }
  },
  mounted () {}
}
</script>

<style scoped lang="css">
.btn {
  color: #b0b0b0;
  font-size: 15px;
  margin-right: 16px;
  cursor: pointer;
  display: inline-block;
}
.btn.active {
  color: #ec7259;
}
.like-btn:hover {
  color: #ec7259;
}
.reply-btn:hover {
  color: #9c9c9c;
}
.comment-input /deep/ textarea {
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fafafa;
  margin-top: 15px;
}
.input-operate {
    overflow: hidden;
}
.input-operate .btn {
  float: right;
  color: #999;
  border: 1px solid #999;
  border-radius: 50px;
  padding: 4px 12px;
  margin-left: 8px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px;
}
.input-operate .btn.primary {
  color: #fff;
  border: 1px solid #ed7961;
  background: #ed7961;
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-100px);
  opacity: 0;
}
</style>
